import React from 'react'
import { Route,Redirect } from 'react-router-dom'
import { isAuth } from '../../utils'

/*
   封装 AuthRoute 鉴权路由组件：

   在 components 目录中创建 AuthRoute/index.js 文件
   创建组件 AuthRoute 并导出
   在 AuthRoute 组件中返回 Route 组件 (在 Route 基础上做了一层包装，用于实现自定义功能)
   给 Route 组件,添加 render 方法,指定该组件要渲染的内容(类似于 component 属性)
   在 render 方法中,调用 isAuth() 判断是否登录
   如果登陆了，就渲染当前组件(通过参数 component 获取到要渲染的组件，需要重命名)
   如果没有登录，就重定向到登录页面，并且指定登录成功后要跳转的页面路径
   将 AuthRoute 组件接收到的 props 原样传递给 Route 组件(保证于 Route 组件使用方式相同)
   使用 AuthRoute 组件配置路由规则，验证能否实现页面的登录访问控制
*/

const AuthRoute = ({ component:Component,...rest }) =>{
    return <Route {...rest} render={props => {
        const isLogin = isAuth()
        if(isLogin) {
            // 将 props 传递给组件，组件中才能获取到路由相关信息
            return <Component {...props} />
        } else {
            return <Redirect to={{
                pathname: '/login',
                state: {
                    from: props.location
                }
            }} />
        }
    }}></Route>
}

export default AuthRoute
